<template>
    <u-popup :show="show" mode="center" @close="close" bgColor="transparent" customStyle="margin:0 auto;" :closeOnClickOverlay="true">
        <view class="text-center p-relative popup-box dir-ltr">
            <view>
                <view class="pt-md px-lg">{{ title ? title : $t('tips') }}</view>
                <view class="pa-lg fs-md p-relative" style="color: #606266">
                    <view v-if="userId" class="p-absolute" style="top: 30rpx; right: 100rpx; z-index: 99"> ID:{{ userId }} </view>
                    <view v-if="custom">
                        <image :src="content" mode="" style="width: 200px; height: 200px" />
                    </view>
                    <!-- <view v-else class="qrcode-container">
                        <uv-qrcode ref="qrcode" :size="size + 'px'" :value="content" :h5SaveIsDownload="true" :options="{ foregroundImageSrc: '/static/images/logo.jpg' }"></uv-qrcode>
                    </view> -->
                </view>
                <view class="row flex-center mb-md">
                    <view @click="saveAlbum" class="app-bg text-white px-md py-sm" style="border-radius: 50rpx">{{ $t('save_the_poster') }}</view>
                </view>
            </view>
        </view>
    </u-popup>
</template>
<script>
export default {
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: '',
        },
        content: {
            type: String,
            default: '',
        },
        size: {
            type: Number,
            default: 200,
        },
        size: {
            type: Number,
            default: 200,
        },
        custom: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            userId: 0,
        }
    },
    watch: {},
    mounted() {},
    created() {
        this.userId = uni.getStorageSync('uid')
    },
    methods: {
        close(e) {
            this.$emit('close')
        },

        // _______________________________
        //保存相册
        saveAlbum() {
            // #ifdef MP-WEIXIN
            uni.getSetting({
                //获取用户的当前设置
                success: (res) => {
                    if (res.authSetting['scope.writePhotosAlbum']) {
                        //验证用户是否授权可以访问相册
                        this.saveImageToPhotosAlbum()
                    } else {
                        uni.authorize({
                            //如果没有授权，向用户发起请求
                            scope: 'scope.writePhotosAlbum',
                            success: () => {
                                this.saveImageToPhotosAlbum()
                            },
                            fail: () => {
                                uni.showToast({
                                    title: '请打开保存相册权限，再点击保存相册分享',
                                    icon: 'none',
                                    duration: 3000,
                                })
                                setTimeout(() => {
                                    uni.openSetting({
                                        //调起客户端小程序设置界面,让用户开启访问相册
                                        success: (res2) => {
                                            // console.log(res2.authSetting)
                                        },
                                    })
                                }, 3000)
                            },
                        })
                    }
                },
            })
            // #endif
        },
        saveImageToPhotosAlbum() {
            let base64 = this.content.replace(/^data:image\/\w+;base64,/, '') //去掉data:image/png;base64,
            let filePath = wx.env.USER_DATA_PATH + '/hym_pay_qrcode.png'
            uni.getFileSystemManager().writeFile({
                filePath: filePath, //创建一个临时文件名
                data: base64, //写入的文本或二进制数据
                encoding: 'base64', //写入当前文件的字符编码
                success: (res) => {
                    uni.saveImageToPhotosAlbum({
                        filePath: filePath,
                        success: function (res2) {
                            uni.showToast({
                                title: '保存成功，请从相册选择再分享',
                                icon: 'none',
                                duration: 5000,
                            })
                        },
                        fail: function (err) {
                            // console.log(err.errMsg);
                        },
                    })
                },
                fail: (err) => {
                    //console.log(err)
                },
            })
        },
    },
}
</script>
<style scoped lang="scss">
.popup-box {
    background: #fff;
    width: 78vw;
    border-radius: 24px;
    max-width: 780px;
}
.qrcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.confrim-btn {
    width: 82%;
    height: 50px;
    position: fixed;
    left: 8%;
    bottom: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    font-size: 15px;
    background-image: linear-gradient(#fe0000, #ff6666);
}
</style>